<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台详情修改页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            width: 100%;
            height: 45px;
            margin-bottom: 15px;
            display: flex;
            align-self: center;
            justify-items: self-start;
        }
        .form-group label {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            margin-bottom: 5px;
            width: 180px;
            color: #999;
        }
        .form-group label em{
            color: red;
            font-size: 20px;
        }
        .form-group input[type="text"]{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 280px;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #eee;
        }
        .form-images{
            width: 100%;
            margin-bottom: 15px;
            border: 1px solid #000;
        }
        .form-images img{
            display: inline-block;
            height: 65px;
            border: 2px solid #000;
            margin: 3px;
        }
        form button{
            display: block;
            height: 35px;
            line-height: 25px;
            background-color: #34aaaa;
            color: #fff;
            padding:5px;
            width: 180px;
            border: 1px solid #fff;
        }
        .image-upload{
            display: inline-block;
            width: 45px;
            height: 45px;
        }
        .image-upload img{
            width: 100%;
        }
        
    </style>
    <script>
        function click_image_file(){
            document.getElementById('file-image').click();
        }
        function image_file(files){
            for (let i = 0; i < files.files.length; i++) {
                file = files.files[i];
                const previewContainer = document.getElementById('images-file');
                // 创建一个预览元素
                const img = document.createElement('img');
                img.classList.add('preview-img');
                // 如果是图片文件，则生成预览 URL
                if (file.type.startsWith('image/')) {
                    img.src = URL.createObjectURL(file);
                } else {
                    // 显示占位符或错误消息
                    img.src = '/static/images/not_adv.jpg'; // 替换为实际的占位符路径
                    img.alt = '不支持的文件类型';
                }
                // 将预览元素添加到容器中
                previewContainer.appendChild(img);
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <form action="" method="post"> <!-- 假设提交到/submit-details处理 -->
            <input type="hidden" name="id" value="{$info.id|default=0}">
            <div class="form-group">
                <label for="web"><em>*</em>网址:</label>
                <input type="text" id="web" name="web" value="{$info.web|default=''}">
            </div>
            <div class="form-group">
                <label for="name"><em>*</em>名称:</label>
                <input type="text" id="name" name="name" value="{$info.name|default=''}">
            </div>
            <div class="form-group">
                <label for="keywords">关键词(多个用逗号隔开)</label>
                <input type="text" id="keywords" name="keywords" value="{$info.keywords|default=''}">
            </div>
            <div class="form-group">
                <label for="title">网站标题</label>
                <input type="text" id="title" name="title" value="{$info.title|default=''}">
            </div>
            <div class="form-group">
                <label for="z">
                    <input type="radio" value="0" id="z" name="style">自定义
                </label>
                <label for="d1">
                    <input type="radio" value="1" id="d1" name="style">默认
                </label>
            </div>
            <div class="form-group">
                <label>轮播图</label>
                <div class="image-upload"><a href="javascript:click_image_file();"><img src="/static/images/upload.jpg"></a></div>
            </div>
            <div class="form-images" id="images-file">

            </div>
            <button type="submit">保存</button>
        </form>
    </div>
</body>
<input type="file" id="file-image" onchange="image_file(this)" multiple style="display:none">
</html>